<*****对抗演练*****>
<template>
	<div id="compReport" class="compReport" :style="{fontSize:fontSize+'px'}">
	<report-header @downloadReports="downloadReports" @zoomIn="zoomIn" @zoomOut="zoomOut" :title="reportInfo.name" :scale="scale" :disSub="disSub" :disDownloadReport="disDownloadReport" :nodownloadReports="1">
		</report-header>
		<div class="reportContent">
			<cover :style="pageMargin" :title="reportInfo.name" :data="coverData"></cover>
			<page class="page2" :style="pageMargin" :title="reportInfo.name" :configAddress="configAddress" :configInstruction="configInstruction" v-if="hlConfig!=2">

				<div id="scoreAnalysis" class="chart" style="height:100%;width:100%"></div>
			</page>
			<page class="page3" :style="pageMargin" type="table" :title="reportInfo.name" v-for="(item,index) in rankListPageNumArr" :key="'page'+index" :configAddress="configAddress" :configInstruction="configInstruction">
				<!--slot--页面主体部分-->
				<div :style="{height:getContentHeight()+'px'}">
					<h4 style="margin-bottom:12px;">排行总榜</h4>
					<Table stripe :columns="reportCol" :data="item.data" class="rankTable"></Table>
				</div>
			</page>
			<page class="page4" :style="pageMargin" type="table" :title="reportInfo.name" v-for="(item,index) in drillPageNumArr" :key="index" :configAddress="configAddress" :configInstruction="configInstruction">
				<!--slot--页面主体部分-->
				<div :style="{height:getContentHeight()+'px'}">
					<h4 style="margin-bottom:12px;">演练数据</h4>
					<Table stripe :columns="drillCol" :data="item.data" class="rankTable"></Table>
				</div>
			</page>
            <page class="page4" :style="pageMargin"  :title="reportInfo.name" v-if="remarkList.length!=0"
				:configAddress="configAddress" :configInstruction="configInstruction">
				<div v-for="(item, index) in remarkList" :key="item.teamName" class="remark-group">
					<p class="user-name">团队名：{{ item.teamName }}</p>
					<div>
						评价：<span class="remark-html" v-html="item.remark"></span>
					</div>
					<p class="subsection" v-if="index !== (remarkList.length - 1)"></p>
				</div>
			</page>
		</div>
	</div>
</template>

<script>
	import HighCharts from 'highcharts'
	import highchartsMore from 'highcharts/highcharts-more';
	import * as SeriesLabel from 'highcharts/modules/series-label';
	import mixin from "@/components/report/mixinFun.js"
	import encryption from "@/libs/encryption.js";
	//接口
     import {getArchiveDeatil} from '@/api/experimenterTrack'
	//组件
	import reportHeader from "@/components/report/reportHeader.vue"
	import cover from "@/components/report/cover.vue"
	import page from "@/components/report/page.vue"
	export default {
		name: 'awdReport',
		components: {
			page,
			cover,
			reportHeader
		},
		mixins: [mixin],
		data() {
			return {
				hlConfig:0,
				reportCol: [{
					key: 'partyName',
					title: '势力方',
					per: 0.2
				}, {
					key: 'totalScore',
					title: '总分',
					per: 0.2
				}, {
					key: 'attackScore',
					title: '攻击得分',
					per: 0.2
				}, {
					key: 'defendScore',
					title: '防守得分',
					per: 0.2
				}, {
					key: 'exceptScore',
					title: '异常得分',
					per: 0.2
				}],
				reportInfo: {},
				sceneId: this.$route.query.id,
				scale: 1,
				fontSize: 14,
				disSub: false,
				rankList: [],
				rankListPageNumArr: [],
				disDownloadReport: true,
				drillTableList:[],
				drillPageNumArr:[],
				drillCol:[],
                remarkList:[]
			}
		},
		watch: {

		},
		filters: {

		},
		computed: {
			coverData: function() {
				let {
					startTime,
					endTime,
					userCount,
					creatorName,
					teamCount
				} = this.reportInfo;
				return [{
					value: startTime,
					title: '开始时间'
				}, {
					value: endTime,
					title: '结束时间'
				}, {
					value: creatorName,
					title: '创建者'
				}, {
					value: (teamCount || 0) + '个',
					title: '参赛团队'
				}, {
					value: (userCount || 0) + '人',
					title: '参赛人数'
				}, ]
			},
		},
		mounted() {
			this.setStyle();
			this.getArchiveDeatil();
			window.onresize = () => {
				this.disDownloadReport = true;
				this.setStyle();
			}
		},
		beforeDestroy() {

		},
		methods: {
		getArchiveDeatil(){
            getArchiveDeatil(this.$route.query.id).then(res=>{
                if(res.code==1){
                    let content=res.data.content
                    content=JSON.parse(content)
                    this.reportInfo=content.reportInfo
                    this.rankListPageNumArr=content.rankListPageNumArr
                    this.drillPageNumArr=content.drillPageNumArr
                    this.hlConfig=content.hlConfig
                    if(content.remarkList){
                        this.remarkList=content.remarkList
                    }
                    this.initCol()
                    this.generateReport()

                }else{
                    this.$Message.warning(res.message)
                }
            })
        },
		getTablePage() {
				this.initCol();
				if(this.drillTableList.length > 0) {
					this.drillPageNumArr = this.getTablePageData(this.drillCol, this.drillTableList);
				}
		},
         initCol() {
				this.drillCol = [
				 {
					type: 'index',
					width: 30,
					title: '排名',
					align: 'center'
				},{
					key: 'teamName',
					title: '团队名称',
					width: 40
				}, {
					key: 'spendTime',
					title: '演练时长',
					per: 0.15
				}, {
					key: 'missionNum',
					title: '演练总任务数',
					width: 0.1
				}, {
					key: 'teamAttackNum',
					title: '团队攻击总数',
					width: 0.15
				},{
					key: 'teamFinishMissionNum',
					title: '团队有效攻击次数',
					per: 0.15
				}, {
					key: 'rightAttackPercent',
					title: '有效攻击指数',
					per: 0.15
				}, {
					key: 'attackPercent',
					title: '攻击指数',
					per: 0.15
				},{
					key: 'threatPercent',
					title: '威胁指数',
					per: 0.2			}];
			},
			setStyle() {
				let width = (window.innerHtml || document.documentElement.clientWidth);
				this.fontSize = width / 1519 * 14;
				if(this.fontSize < 10) {
					this.fontSize = 10;
				}
				this.setPageMargin();
				this.getRankPage();
			},
			initReportCol() {
				this.reportCol = [{
					key: 'partyName',
					title: '势力方',
					per: 0.2
				}, {
					key: 'totalScore',
					title: '总分',
					per: 0.2
				}, {
					key: 'attackScore',
					title: '攻击得分',
					per: 0.15
				}, {
					key: 'defendScore',
					title: '防守得分',
					per: 0.15
				}, {
					key: 'exceptScore',
					title: '异常得分',
					per: 0.15
				}];
			if(this.hlConfig==2){
				this.reportCol.splice(3,2)
				this.reportCol.push({
					 title:'防守失分',
                    key:"defendScore",
					per: 0.15
				},
				{
					title:'异常失分',
                	key:"expLoseScore",
					per: 0.15,
					render:(h,params)=>{
                            return h('span',params.row.expLoseScore||'0')
                        }
				},
				{
					title:'加减分',
                	key:"totalAddScore",
					per: 0.15,
					render:(h,params)=>{
                            return h('span',params.row.totalAddScore||'0')
                        }
				})
				this.reportCol.splice(0,1,{
					key: 'partyName',
					title: '团队',
					per: 0.2
				})

			}
			},
			getRankPage() {
				this.initReportCol();
				if(this.rankList.length > 0) {
					this.rankListPageNumArr = this.getTablePageData(this.reportCol, this.rankList);
				}
				this.$nextTick(() => {
					this.disDownloadReport = false;
				});
			},
			//生成报告
			generateReport() {
						this.getRankPage();
						if(this.hlConfig!=2){
							this.$nextTick(() => {
								this.drawChart();
							});		
						}
			},
			drawChart() {
				let _this = this;
				let users = [];
				let categorys = [];
				let indicatorData = [];
				if(_this.reportInfo.rankList.length <= 0) {
					return
				}
				let rankList = [];
				console.log(this.reportInfo.rankList,'this.reportInfo.rankListthis.reportInfo.rankList');
				this.reportInfo.rankList.forEach(rank => {
					let c = 1 / rank.teamScoreVOList.length;
					console.log(c,22222222222222);
					rank.teamScoreVOList.forEach((team, index) => {
							let color = rank.partyColor.split('(')[1].split(')')[0].split(',');
							color.push(1 - (index * c));
							console.log(color);
							team.partyColor = "rgba(" + color.join(',') + ")";
						})
						//			  	"'"
					rankList = rankList.concat(rank.teamScoreVOList);
				})
				let scoreOptione = {
					chart: {
						backgroundColor: 'transparent',
					},
					title: {
						text: '得分趋势统计',
						align: 'left',
						y: this.fontSize * 0.8,
						style: {
							fontSize: this.fontSize * 0.8 + 'px',
							fontWeight: 'bold',
							//		            color: 'red'   //这边是改标题的字体大小和颜色
						}
					},
					legend: {
						//        	floating: true,            
						align: 'left',
						verticalAlign: 'top',
						itemStyle: {
							fontSize: this.fontSize * 0.6 + 'px',
							fontWeight: 'normal',
							//		            color: 'red'   //这边是改标题的字体大小和颜色
						}
					},
					xAxis: {
						categories: rankList[0].teamScoreVO.map(score => score.scoreDate),
						labels: {
							style: {
								fontSize: this.fontSize * 0.6
							},
						},
					},
					plotOptions: {
						series: {
							label: {
								//connectorAllowed: false
							}
						}
					},
					yAxis: {
						title: {
							text: '得分'
						},
					},
					series: rankList.map(team => {
						return {
							name: team.teamName,
							//type:'line',
							data: team.teamScoreVO.map(score => score.score)
						}
					}),
					colors: rankList.map(rank => rank.partyColor),
					credits: {
						enabled: false
					}, //去掉地址
					exporting: {
						enabled: false
					}, //隐藏导出图片
					responsive: {
						rules: [{
							condition: {
								maxWidth: 500
							},
							chartOptions: {
								legend: {
									layout: 'horizontal',
									align: 'left',
									verticalAlign: 'top'
								}
							}
						}]
					}
				};
				SeriesLabel(HighCharts);
				HighCharts.chart('scoreAnalysis', scoreOptione);
			},
			zoomIn() {
				if(this.scale == 0.5) {
					return
				}
				this.disDownloadReport = true;
				this.scale = this.accSub(this.scale, 0.1);
				if(this.scale != 0) {
					this.fontSize = this.fontSize - 0.5;
				}
				if(this.hlConfig!=2){
					this.drawChart();			
				}
				this.setPageMargin();
				this.getRankPage();
			},
			zoomOut() {
				if(this.scale == 3) {
					return
				}
				this.disDownloadReport = true;
				this.scale = this.accAdd(this.scale, 0.1);
				if(this.scale != 0) {
					this.fontSize = this.fontSize + 0.5;
				}
				if(this.hlConfig!=2){
					this.drawChart();			
				}
				this.setPageMargin();
				this.getRankPage();
			}
		},
		destroyed() {

		}
	}
</script>
<style scoped src="@/components/report/report.css">
	
</style>